<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.3.min.js"></script>
    <style type="text/css">
        .container {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        img {
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
<button id="btn0">开灯</button>
<button>关灯</button>
<div class="container">
    <img src="images/bg.jpg">
</div>
</body>
<script>
    $(function () {
        // 通过 jQuery 方式添加点击事件
        let $buttons0 = $('#btn0');
        $buttons0.click(function () {
            $('body').css('backgroundColor', 'white')
        })

        // 通过原生 JavaScript 的方式添加点击事件
        let buttons = document.getElementsByTagName('button')
        buttons[1].onclick = function () {
            let body = document.getElementsByTagName('body');
            body[0].style.backgroundColor = 'black';
            console.log(body);
        }
    })
</script>
</html>